<template>
  <view class="CompleteInfo">
    <!-- 单元格选项 -->
    <van-cell
      title="昵称"
      :value="infoForm[0].value"
      @click="handleShowContentBox(0)"
      is-link
    />
    <van-cell
      title="学校(选填)"
      is-link
      :value="infoForm[1].value"
      @click="handleShowContentBox(1)"
    />
    <van-cell
      title="校区(选填)"
      is-link
      :value="infoForm[2].value"
      @click="handleShowContentBox(2)"
    />
    <van-cell
      title="年级(选填)"
      is-link
      :value="infoForm[3].value"
      @click="handleShowContentBox(3)"
    />
    <van-cell
      title="班级(选填)"
      is-link
      :value="infoForm[4].value"
      @click="handleShowContentBox(4)"
    />
    <van-cell
      title="企鹅(选填)"
      is-link
      :value="infoForm[5].value"
      @click="handleShowContentBox(5)"
    />
    <van-cell
      title="微信(选填)"
      is-link
      :value="infoForm[6].value"
      @click="handleShowContentBox(6)"
    />
    <van-cell
      title="个人介绍(选填)"
      is-link
      :value="infoForm[7].value"
      @click="handleShowContentBox(7)"
      class="value-class"
    />
    <view class="tagGroup" v-if="infoForm[8].value.length">
      <view class="tagsContent">
        <van-tag
          :color="tagsColor[index]"
          plain
          size="large"
          v-for="(item, index) in infoForm[8].value"
          :key="index"
          >{{ item }}</van-tag
        >
      </view>
    </view>
    <!-- 提交提示和按钮 -->
    <view class="prompt">企鹅或微信如果不填写无法将个人信息展示在首页</view>
    <view class="subBtn">
      <van-button
        round
        block
        color="#aaa"
        class="btnSumbit"
        @click="showTagBox = true"
        >选择标签(必要)</van-button
      >
      <van-button
        round
        block
        color="#05A47D"
        class="btnSumbit"
        @click="handleSumbit"
        >保存</van-button
      >
    </view>

    <!-- 选择标签组件 -->
    <van-overlay :show="showTagBox" z-index="100">
      <view class="chooseTagBox">
        <view class="tagBox animate__animated animate__bounceIn">
          <view class="tagTitle">选择标签</view>
          <SelectTagBox
            @chooseTagFinished="handleFinishTag"
            :tagList="tagList"
            :maxNumber="4"
          />
          <view class="btnGroup">
            <van-button
              block
              size="small"
              color="#aaa"
              @click="showTagBox = false"
              >取消</van-button
            >
            <van-button
              block
              size="small"
              color="#05A47D"
              @click="handleConfirmTag"
              >选择完成</van-button
            >
          </view>
        </view>
      </view>
    </van-overlay>

    <!-- 输入单元格选项组件 -->
    <van-overlay :show="showContentBox" z-index="100">
      <view class="contentBox">
        <view class="inputBox animate__animated animate__bounceIn">
          <view class="contentTitle">{{ infoForm[contentIndex].title }}</view>
          <!-- 正常选项输入 -->
          <input
            type="text"
            class="input"
            v-model="currentValue"
            v-if="contentIndex !== 3"
          />
          <!-- 年级选项输入（下拉框） -->
          <view class="gradeBox" v-else>
            <view
              :class="['input', gradeChooseFlag ? 'inputActive' : '']"
              @click="gradeChooseFlag = !gradeChooseFlag"
            >
              <text class="gradeContent">{{ currentValue }}</text>
              <image
                src="../../static/icons/arrow.png"
                :class="['arrow', gradeChooseFlag ? 'arrowActive' : '']"
              ></image>
              <view
                :class="[
                  'gradeOptions',
                  gradeChooseFlag ? 'gradeOptionsActive' : '',
                ]"
              >
                <view
                  class="gradeItem"
                  v-for="(item, index) in gradeList"
                  :key="index"
                  @click.stop="chooseGrade(item)"
                  >{{ item }}</view
                >
              </view>
            </view>
          </view>
          <view class="btnGroup">
            <van-button
              block
              size="small"
              color="#aaa"
              @click="showContentBox = false"
              >取消</van-button
            >
            <van-button
              block
              size="small"
              color="#05A47D"
              @click="handleConfirmContent"
              >确认</van-button
            >
          </view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
import SelectTagBox from "../../components/public/SelectTagBox.vue";
export default {
  components: {
    SelectTagBox,
  },
  data() {
    return {
      showTagBox: false,
      showContentBox: false,
      gradeChooseFlag: false,
      contentIndex: 0,
      currentValue: "",
      gradeList: [],
      tagsColor: ["#aaa", "#999", "#05A47D", ""],
      tagList: [
        "前端",
        "后端",
        "游戏",
        "竞赛",
        "Java",
        "Vue",
        "JavaScript",
        "React",
      ],
      infoForm: [
        {
          title: "填写昵称",
          value: "",
        },
        {
          title: "填写学校",
          value: "",
        },
        {
          title: "填写校区",
          value: "",
        },
        {
          title: "填写年级",
          value: "",
        },
        {
          title: "填写班级",
          value: "",
        },
        {
          title: "填写企鹅",
          value: "",
        },
        {
          title: "填写微信",
          value: "",
        },
        {
          title: "填写个人介绍",
          value: "",
        },
        {
          title: "选择标签",
          value: [],
        },
      ],
    };
  },
  mounted() {
    this.initFormData();
  },
  methods: {
    // 接收输入框里的标签
    handleFinishTag(tags) {
      this.infoForm[8].value = tags;
    },

    // 确认选择标签是否完成
    handleConfirmTag() {
      if (this.infoForm[8].value.length !== 4) {
        uni.showToast({
          title: "不少于4个标签",
          icon: "error",
          duration: 1000,
        });
        return;
      } else {
        uni.showToast({
          title: "已保存",
          icon: "success",
          duration: 1000,
        });
        this.showTagBox = false;
      }
    },

    // 展示设置内容box
    handleShowContentBox(index) {
      this.contentIndex = index;
      this.showContentBox = true;
      this.currentValue = this.infoForm[index].value;
    },

    // 确认内容box信息
    handleConfirmContent() {
      this.infoForm[this.contentIndex].value = this.currentValue;
      this.showContentBox = false;
      this.currentValue = "";
    },

    // 选择年级
    chooseGrade(item) {
      console.log(item);
      this.currentValue = item;
      this.gradeChooseFlag = false;
    },

    // 保存提交个人信息
    async handleSumbit() {
      const item = {};
      item.nickName = this.infoForm[0].value;
      item.school = this.infoForm[1].value;
      item.area = this.infoForm[2].value;
      item.grade = this.infoForm[3].value;
      item.cls = this.infoForm[4].value;
      item.qq = this.infoForm[5].value;
      item.wx = this.infoForm[6].value;
      item.introduce = this.infoForm[7].value;
      item.tags = this.infoForm[8].value;
      try {
        await this.$store.dispatch("savePersonalInfo", item);
        uni.showToast({
          icon: "success",
          title: "保存成功",
          duration: 1000,
        });
      } catch (err) {
        console.log(err);
        uni.showToast({
          icon: "error",
          title: "保存失败",
          duration: 1000,
        });
      }
    },

    // 初始化表单数据
    initFormData() {
      const userInfo = this.$store.state.userInfo;
      let year = parseInt(new Date().getFullYear().toString().slice(2, 4)); // 设置年级选项
      this.infoForm[0].value = userInfo.nickName;
      this.infoForm[1].value = userInfo.school;
      this.infoForm[2].value = userInfo.area;
      this.infoForm[3].value = userInfo.grade;
      this.infoForm[4].value = userInfo.cls;
      this.infoForm[5].value = userInfo.qq;
      this.infoForm[6].value = userInfo.wx;
      this.infoForm[7].value = userInfo.introduce;
      this.infoForm[8].value = userInfo.tags;
      for (let i = 0; i < 4; i++) {
        this.gradeList.unshift(year-- + "级");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.CompleteInfo {
  padding: 20rpx;
  .title {
    position: relative;
  }

  .prompt {
    display: flex;
    justify-content: center;
    margin: 20rpx;
    font-size: 26rpx;
    color: #999;
  }

  .subBtn {
    display: flex;
    justify-content: space-around;
    .btnSumbit {
      flex: 1;
      margin-right: 20rpx;
    }
  }

  .chooseTagBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .tagBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 400rpx;
      padding: 20rpx;
      background-color: #fff;
      z-index: 100;
      border-radius: 10rpx;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3) inset;

      .tagTitle {
        font-size: 38rpx;
        margin-bottom: 30rpx;
      }
      .tagContent {
        width: 300rpx;
        height: 100%;
      }
    }
  }

  .contentBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .inputBox {
      width: 400rpx;
      padding: 20rpx;
      border-radius: 10rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      .contentTitle {
        margin-bottom: 20rpx;
        font-size: 38rpx;
      }
      .input {
        box-sizing: border-box;
        width: 360rpx;
        box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3);
        border-radius: 10rpx;
        padding: 0 10rpx;
      }
      .gradeBox {
        .input {
          position: relative;
          height: 60rpx;
          transition: all 0.5s;
        }
        .gradeContent {
          position: absolute;
          top: 10rpx;
          left: 10rpx;
        }
        .inputActive {
          box-shadow: 0 0 8rpx #05a47d;
        }
        .arrow {
          position: absolute;
          top: 18rpx;
          right: 20rpx;
          width: 30rpx;
          height: 30rpx;
          transition: all 0.5s;
        }
        .arrowActive {
          transform: rotateZ(180deg);
        }
        .gradeOptions {
          position: relative;
          bottom: -70rpx;
          left: 0;
          width: 100%;
          border-radius: 8rpx;
          box-sizing: border-box;
          box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
          background-color: #fff;
          color: #606266;
          font-size: 30rpx;
          z-index: 999;
          transition: all 0.5s;
          transform: scale(0);
          .gradeItem {
            padding: 10rpx;
          }
          .gradeItem:active {
            background-color: #f5f7fa;
          }
        }
        .gradeOptionsActive {
          transform: scale(1);
        }
      }
    }
  }

  .btnGroup {
    width: 300rpx;
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
  }
  .tagGroup {
    width: 100%;
    display: flex;
    justify-content: center;
    .tagsContent {
      width: 80%;
      display: flex;
      justify-content: space-around;
    }
  }
}
.value-class {
  width: 150rpx !important;
  background-color: red !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-right: 30rpx !important;
}
</style>

<style>
page {
  background-color: #fff;
  height: 100%;
}
</style>
